<template>
    <div class="dialog_main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 个人数据 -->
            <el-tab-pane label="个人数据" name="personal">
                <el-button type="danger" size="small" style="float: right;margin-left: 10px;transform: translateY(1px);"
                    :disabled="!selectList.length" @click="batchDelete(selectList)">批量删除</el-button>
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="paramsQuery.fileName"
                    @input="searchContent">
                </el-input>
                <el-table :data="personalData" height="260px" style="width: 100%;" :header-cell-style="getRowClass"
                    @selection-change="handleSelectionChange" ref="tableInfo">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="originFileName" label="文件" align="center">
                    </el-table-column>
                    <el-table-column prop="fileSize" label="大小" align="center">
                        <template slot-scope="scope">
                            <span>{{ $size2Str(scope.row.fileSize) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uploadDate" label="日期" align="center">
                    </el-table-column>
                    <el-table-column prop="mobilePhone" label="创建者" align="center" min-width="120px">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="150px">
                        <template slot-scope="scope">
                            <el-popover placement="bottom" width="150" trigger="click" ref="popoverDom">
                                <div class="popover_input">
                                    <el-input v-model="rowName"></el-input>
                                </div>
                                <div class="popover_btn">
                                    <el-button type="primary" size="mini"
                                        @click="determinePopover(scope.row.id)">确定</el-button>
                                    <el-button size="mini" @click="closePopover">取消</el-button>
                                </div>
                                <el-tooltip class="item" effect="dark" content="重命名" placement="top" slot="reference"
                                    style="margin-right: 12px;">
                                    <el-button size="mini" icon="el-icon-edit"
                                        @click="rowName = scope.row.originFileName"></el-button>
                                </el-tooltip>
                            </el-popover>

                            <el-popover placement="left" width="700" trigger="click" ref="popoverPre"
                                @hide="closePrePopover">
                                <el-table :data="tableData" stripe style="width: 100%" border
                                    :header-cell-style="getRowClass" max-height="400px">
                                    <el-table-column :prop="listConfig[index]" :label="item"
                                        v-for="(item, index) in listConfig" :key="item.A">
                                    </el-table-column>
                                </el-table>
                                <el-tooltip class="item" effect="dark" content="预览" placement="top" slot="reference"
                                    style="margin-right: 12px;">
                                    <el-button size="mini" icon="el-icon-search" plain
                                        @click="beforePreview(scope.row.id)"></el-button>
                                </el-tooltip>
                            </el-popover>

                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                    icon="el-icon-delete"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="->,prev, pager, next" :total="total" style="margin: 15px 0;"
                    @current-change="currentChange">
                </el-pagination>
                <div class="dialog_footer">

                    <el-button class="gradient determine" v-show="selectList.length" @click="determine">确定</el-button>
                    <el-button class="determine" v-show="!selectList.length" disabled>确定</el-button>
                    <el-button class="cancel" @click="cancel">取消</el-button>
                </div>
            </el-tab-pane>
            <!-- 公共数据 -->
            <!-- <el-tab-pane label="公共数据" name="public">
                <el-breadcrumb separator="/" class="breadcremb">
                    <el-breadcrumb-item>home</el-breadcrumb-item>
                </el-breadcrumb>

                <el-table :data="tableData" height="260px" style="width: 100%;margin-bottom: 62px;"
                    :header-cell-style="getRowClass">
                    <el-table-column prop="originFileName" label="文件" align="center">
                    </el-table-column>
                    <el-table-column prop="fileSize" label="大小" align="center">
                        <template slot-scope="scope">
                            <span>{{ $size2Str(scope.row.fileSize) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uploadDate" label="日期" align="center">
                    </el-table-column>
                </el-table>
                <div class="dialog_footer">
                    <el-button class="determine" disabled>确定</el-button>
                    <el-button class="cancel" @click="cancel">取消</el-button>
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>

<script>
import { getPersonDataFileListRequest, deleteFileRequest, renameFileRequest } from '@/api/tools'
import { throttle } from '@/utils';
import filePreview from './filePreview.vue'
import { previewDataRequest } from '@/api/tools'
export default {
    name: 'GenescloudUiCloudPreview',
    components: { filePreview },
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            activeName: 'personal',
            paramsQuery: {
                cloudPictureCode: '',
                fileName: "",
                pageNo: 0,
                pageSize: 10,
                uploadFileType: null,
            },
            total: 0,
            // 个人数据
            search: null,
            selectList: [],
            personalData: [
                // {
                // originFileName: '文件名',
                // fileSize: '10M',
                // data: '2016-05-02',
                // mobilePhone: 'wang'
                // }
            ],
            //公共数据
            tableData: [{
                originFileName: '文件名',
                fileSize: '10M',
                uploadDate: '2016-05-02',
            }],
            emitList: [],
            //重命名
            rowName: null,
            tableData: null,
            listConfig: null,
        };
    },
    created() {
        this.paramsQuery.uploadFileType = this.title
        this.paramsQuery.cloudPictureCode = this.$router.history.current.name
        this.getList(this.paramsQuery)
    },
    mounted() {

    },

    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        //table 自定义表头
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#eee;font-weight: 400;color:#666;text-align:center";
            }
        },
        determine() {
            // if (this.emitList.length > 1) return this.$message.error('只能选择单个文件生成！')
            this.$emit('selectFile', this.emitList)
            this.$refs.tableInfo.clearSelection()
            this.emitList = []
            this.paramsQuery.pageNo = 1
            this.selectList = []
        },
        cancel() {
            this.$refs.tableInfo.clearSelection()
            this.emitList = []
            this.paramsQuery.pageNo = 1
            this.selectList = []
            this.$emit('cancel', false);
        },
        searchContent: throttle(function () {
            this.getList(this.paramsQuery)
        }, 1000),
        //获取个人数据文件列表
        async getList(paramsQuery = this.paramsQuery) {
            try {
                const res = await getPersonDataFileListRequest(paramsQuery)
                if (res.code !== 200) return this.$message.error(res.message)
                this.personalData = res.data.list
                this.total = res.data.total
            } catch (error) {
                this.$message.error('服务器错误，请联系管理员！')
            }
        },
        currentChange(value) {
            this.paramsQuery.pageNo = value
            this.getList(this.paramsQuery)
        },
        // 单文件删除
        handleDelete(index, row) {
            this.batchDelete([row.id])
        },
        handleSelectionChange(value) {
            this.selectList = value.reduce((pre, item) => {
                pre.push(item.id)
                return pre
            }, [])
            this.emitList = value.reduce((pre, item) => {
                pre.push({
                    text: item.originFileName,
                    id: item.id
                })
                return pre
            }, [])
        },
        batchDelete(fileIdList) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        try {
                            const res = await deleteFileRequest({
                                cloudPictureCode: this.paramsQuery.cloudPictureCode,
                                fileIdList
                            })
                            if (res.code !== 200) return this.$message.error(res.message)
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getList(this.paramsQuery)
                        } catch (error) {
                            this.$message.error('服务器错误，请联系管理员！')
                        }
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })

        },
        //文件重命名
        closePopover() {
            document.body.click()
            // this.$refs.popoverDom.doClose()
        },
        async determinePopover(id) {
            const res = await renameFileRequest({
                fileId: id,
                newName: this.rowName
            })
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({
                type: 'success',
                message: res.message
            })
            this.getList(this.paramsQuery)
            this.closePopover()
        },
        async beforePreview(id) {
            const res = await previewDataRequest({
                cloudPictureCode: this.paramsQuery.cloudPictureCode,
                fileId: id,
                uploadFileType: this.paramsQuery.uploadFileType
            })
            if (res.code !== 200) return this.$message.error(res.message)
            if (res.data.dataList.length) {
                const dataList = res.data.dataList
                this.listConfig = Object.keys(dataList[0])
                this.tableData = dataList
            } else {
                document.body.click()
                return this.$message.error('文件内容错误！')
            }
        },
        closePrePopover() {
            this.listConfig = []
            this.tableData = []
            // console.log(this.listConfig, this.tableData);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after {
    width: 0;
}

.dialog_main {
    position: relative;
    // padding-bottom: 50px;

    ::v-deep .el-input {
        float: right;
        width: 120px;
        margin-bottom: 15px;
    }

    ::v-deep .el-input--prefix .el-input__inner {
        padding-left: 30px;
        width: 120px;
        height: 35px;
        border-radius: 6px;
    }

    ::v-deep .el-tabs__content {
        padding: 0;
    }

    .breadcremb {
        padding: 18px 0;
    }

    .dialog_footer {
        // position: absolute;
        // bottom: 0;
        // right: 0;
        // background-color: red;
        display: flex;
        justify-content: flex-end;
        transform: translateY(-5px);

        .determine,
        .cancel {
            // cursor: pointer;
            width: 120px;
            // height: 40px;
            background-color: #eeeeee;
            text-align: center;
            // line-height: 40px;
            border-radius: 5px;
            box-shadow: 0 3px 4px #ccc;
            border: 0;
            color: #666;

            &:hover {
                border: 0;
                color: #666;
            }

        }

        .determine {
            color: #fff;
            background-color: #ccc;
            margin-right: 15px;

            &.gradient {
                background: linear-gradient(90deg, #00a6fb, #4481eb);
            }

            &:hover {
                color: #fff;
            }
        }
    }
}

.popover_input {
    margin-bottom: 10px;

    ::v-deep .el-input__inner {
        height: 30px;
        line-height: 30px;
    }
}
</style>

<style>
/* 确认窗 取消确认按钮位置更换 */
.el-message-box__wrapper .el-message-box__btns {
    display: flex;
    flex-flow: row-reverse;
}

.el-message-box__wrapper .el-message-box__btns .el-button {
    margin-left: 10px;
}
</style>